<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="example1">
			
			
			<alert-box>
				  Something bad happened.
			</alert-box>
			
		</div>	
		<!-- 
		
		通过插槽分发内容<slot></slot>
		 -->
		<script type="text/javascript">
			
			Vue.component('alert-box',{
				template:`
				<div class="demo-alert-box">
					<strong>Error!</strong>
					<slot></slot>
				</div>
				`
			})
			new Vue({
				el:'#example1',
				data:{
					counter:0,
					enterValue:'',
					postFontSize:1,
					searchText:'',
					 posts: [
					      { id: 1, title: 'My journey with Vue',content:'My journey with Vue' },
					      { id: 2, title: 'Blogging with Vue',content:'Blogging with Vue' },
					      { id: 3, title: 'Why Vue is so fun',content:'Why Vue is so fun' }
					    ],
					
				},
				methods:{
					onEnlrageText:function(value){
						this.postFontSize+=value;
					}
				}
			})
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
